<!-- directive:title 制作雪碧图 -->
<!-- directive:breadcrumb 制作雪碧图 -->
<div class="panel-body">
    <!-- directive:pagetaglist 工具 -->
    <style type='text/css'>
        .xxxx5543 #canvas { border:1px solid #c3c3c3; }
        .xxxx5543 img { border:1px solid yellow; }
        .xxxx5543 #layout { position: relative; overflow: auto; }
        .xxxx5543 #grid_canvas{ position: absolute; o:0px; top:0px; }
        .xxxx5543 #zoom_canvas{ position: absolute; o:0px; top:0px; display: none; }
        .xxxx5543 #css_html_template, #png_out, #css_out, #export{ display: none; }
        .xxxx5543 .png_and_css{ -webkit-transition:background-color .5s ease-in-out; transition:all .5s ease-in-out; }
        .xxxx5543 .yellow_inform { background-color: yellow; }
        .xxxx5543 #png_link, #css_link{ display: none; }
        .xxxx5543 #absolute_path, #relative_path, #css_template{ width: 580px; }
        .xxxx5543 #ta{ display: none; }
    </style>
    <div class="row xxxx5543">
        <div class="col-sm-8">
            <ul class="nav nav-tabs">
                <li class="active" data-toggle="layout" >
                    <a href="javascript:;">Canvas</a>
                </li>
                <li class="" data-toggle="css_html_template">
                    <a href="javascript:;">Css Template</a>
                </li>
                <li class="" data-toggle="png_out" >
                    <a href="javascript:;" class="png_and_css">Png</a>
                </li>
                <li class="" data-toggle="css_out" >
                    <a href="javascript:;" class="png_and_css">CSS</a>
                </li>
                <li class="" data-toggle="export" >
                    <a href="javascript:;" class="png_and_css">Export</a>
                </li>
            </ul>
            <div id="layout">
                <canvas id="grid_canvas">
                    You browser does not support the canvas elements.
                </canvas>
                <canvas id="canvas">
                    You browser does not support the canvas elements.
                </canvas>
                <canvas id="zoom_canvas">
                    You browser does not support the canvas elements.
                </canvas>
            </div>
            <div id="css_html_template">
                <form class="form-horizontal">
                    <fieldset>
                        <h6>Css template</h6>
                        <div class="control-group">
                            <label class="control-label">Sprite absolute path</label>
                            <div class="controls docs-input-sizes">
                                <input class="input-xlarge" type="text" placeholder='' id="absolute_path" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Sprite relative path</label>
                            <div class="controls docs-input-sizes">
                                <input class="input-xlarge" type="text" placeholder='' id="relative_path" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Css Template</label>
                            <div class="controls">
                                <textarea class="input-xlarge" id="css_template" rows="25">
                                </textarea>
                                <p>name for fileName without ext</p>
                            </div>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary" id="css_template_apply">应用</button>
                            <button class="btn" id="css_template_reset">Reset</button>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div id="png_out">
                <div class="row">
                    <div class="span2">
                        <div>
                            <a id="png_link" download="sprite.png" target="_blank" title="download png" href="javascript:;">
                                <button class="btn btn-info">
                                    <i class="icon-file icon-white"></i>Download
                                </button>
                            </a>
                        </div>
                    </div>
                    <div class="span2">
                    </div>
                </div>
                <div id="img"></div>
            </div>
            <div id="css_out">
                <div>
                    <a class="btn btn-info" id="css_link" download="style.css" target="_blank" title="download css" href="javascript:;"><i class="icon-file icon-white"></i>Download</a>
                </div>
                <h6>css code:</h6>
                <pre id="target_css">
                </pre>
            </div>
            <div id="export">
                <div class="hero-unit">
                    <h1>Export!</h1>
                    <p>Export and save the file, then you can recover your workspace by drop it on the canvas next time!</p>
                    <p>
                        <a class="btn btn-primary btn-large" download="export.json" id="export_workspace" href="javascript:;">Export</a>
                    </p>
                </div>
            </div>
            <p>
                <div class="alert">
                  <button class="close" data-dismiss="alert" id="browser_notice">×</button>
                  <strong>Notice!</strong> This HTML5 app is only tested for Chrome 18+(recommend) and Firefox 10+ now.
                </div>
            </p>
        </div>
        <div class="col-sm-4">
            <div class="well">
                <button class="btn btn-success" id="make">Make Png & css</button>
                <br /><br />
                <div class="form-inline">
                    <input class="form-control" type="text" placeholder='Canvas width' id="canvas_width" style="width:100px" />
                    <input class="form-control" type="text" placeholder='Canvas Height' id="canvas_height" style="width:100px" />
                    <button type="submit" class="btn btn-primary" id="canvas_sizes_apply">应用</button>
                </div>
                <br /><br />
                <div class="btn-group" id="packer_modes_fixed">
                    <button class="btn btn-primary" id="vertical">Vertical</button>
                    <button class="btn btn-primary" id="bintree">BinTree</button>
                </div>
                <br /><br />
                <div class="btn-group" id="packer_modes_grow">
                    <!--<button class="btn btn-primary disabled" id="verticalGrow" onclick="return false;">Vertical</button>-->
                    <button class="btn btn-primary" id="bintreeGrow" onclick="return false;">BinTree</button>
                    <button class="btn btn-primary" id="Minimize" onclick="return false;">Minimize</button>
                </div>
                <br /><br />
                <div class="btn-group" id="zoom_factors">
                    <button class="btn btn-primary" id="1x">1X</button>
                    <button class="btn btn-primary" id="2x">2X</button>
                    <button class="btn btn-primary" id="4x">4X</button>
                </div>
                <br /><br />
                <input class="form-control" type="text" placeholder='Zoom raduis' id="zoom_setting_value" />
                <button type="submit" class="btn btn-primary" id="zoom_setting_apply">应用</button>
                <br /><br />
                <button class="btn btn-primary" id="magnet">Magnet!</button>
                <br /><br />
                <input class="form-control" type="text" placeholder='Magnet distance' id="magnet_setting_value"/>
                <button type="submit" class="btn btn-primary" id="magnet_setting_apply">应用</button>
            </div>
        </div>
    </div>
</div>
